<template>
    <div class="layout-app">
		<!-- main -->
			<!-- 新增 -->
		<div class="addksFile">
			<el-dialog title="编辑科室属性" :visible.sync="dialogFormVisible" width="48%" :before-close="handleAddClose" :modal="false">
				<el-divider></el-divider>
				<!-- tabs -->
				<div class="tabs">
					<div class="tabsMain">
						<!-- tabs-left -->
						<div class="tabs-left">
							<!-- 表单 -->
							<el-form ref="form" :model="ks" label-width="80px" size="mini" 
							v-loading="loading"
							element-loading-text="修改中..."
							element-loading-spinner="el-icon-loading">
								<el-row :gutter="20">
								  <el-col :span="v.spanRows" type="flex" v-for="(v,i) in formType" :key="i">
									  <!-- input -->
									  <el-form-item v-if="v.type == 'input'" :label="v.label">
										<el-input :suffix-icon='v.prefix' v-model="$data.ks[v.modelValue]" placeholder="请输入内容"></el-input>
									  </el-form-item>
									  <!-- select -->
									  <el-form-item v-if="v.type == 'select'" :label="v.label">
										<el-select v-model="$data.ks[v.modelValue]" @focus="sname(v,i)" @change="scname" placeholder="请选择">
										    <el-option v-for="(item,index) in $data[v.op]" :key="index" :label="item.label" :value="item"> 
											<span style="float: center; color: #8492a6; font-size: 12px">{{ item.label }}</span></el-option>
										</el-select>
									  </el-form-item>
								  </el-col>
								</el-row>
					
							</el-form>
						</div>
						
					</div>
				</div>
			  <div slot="footer" class="dialog-footer">
				<el-button size="mini" type="primary" @click="editNewDiction" :disabled="disabled">完成修改</el-button>
				<el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
			  </div>
			</el-dialog>
		</div>
    </div>
</template>

<script>
// self
import addksFileTabledept from './addksFileTabledept.js'
// prop

export default {
	components:{
		addksFileTabledept
	},
	props:{
		toSonData:{
			type:Object,
		}
	},
	data(){
		return{
			//str
			idx:'',
			value:'',
			//num
			
			//ble
			loading:false,
			disabled:false,
			dialogFormVisible:false,
			//arr
			formType:[],
			sexOptions:[{id:1,label:'男',value:'男'},{id:2,label:'女',value:'女'}],
			statusOptions:[{id:1,label:'是',value:'是'},{id:2,label:'否',value:'否'}],
			//obj
			addForm:{
				deptCode:'',  //科室编码
				status:'',  //有效状态
				deptName:'',  //科室名称
				pyCode:'',  //拼音简码
				personInCharge:'',  //负责人
				personInChargeTel:'',  //负责人电话
				specialtyName:'',  //科室专业
				physicalPosition:'',//物理位置
				returnVisitNum:'',  //返诊期限
				deptType:'',  //科室类型
				medicineType:'',  //医学类型
				remark:'',  //备注
				// 科室属性
				departmentAttribute:[]
			},
			// 科室属性
			ks:{
				attributeName:'',//科室属性
				applyEmergency: '',//急诊
				applyOutpatient: '',//门诊
				applyRegister: '', //挂号
				applyHospital: '',//住院
			},
			selectKsOptions:[
				{num:'7',label:'麻醉',value:'麻醉'},{num:'A',label:'临床',value:'临床'},
				{num:'B',label:'检查',value:'检查'},{num:'C',label:'检验',value:'检验'},
				{num:'D',label:'手术',value:'手术'},{num:'E',label:'治疗',value:'治疗'},
			],
			emeOptions:[{label:'是',value:'是'},{label:'否',value:'否'}],
			OutOptions:[{label:'是',value:'是'},{label:'否',value:'否'}],
			regOptions:[{label:'是',value:'是'},{label:'否',value:'否'}],
			HosOptions:[{label:'是',value:'是'},{label:'否',value:'否'}],
		}
		
	},
	mounted() {
		// 左侧提交表单
		this.formType = addksFileTabledept.map(function(v) {
			return v
		})
	},
	methods:{
		//  select聚焦
		sname(v,i) {
			console.log(v,i);
			// v.id = i;
			this.idx = i;
			// i event
			switch (i) {
				case 1:
					// 有效状态
					console.log('id索引为1的');
					break;
			}
		},
		scname(v){
			v.id = this.idx;
			// v.tel !== undefined ? this.addForm.personInChargeTel = v.tel : v.tel
			// i event
			switch (this.idx) {
				case 0:
				// 字段映射
					this.ks.attributeName = v.value
					break;
				case 1:
					// 急诊
					this.ks.applyEmergency = v.value
					break;
				case 2:
					// 挂号 deptType  确定Value键值对
					this.ks.applyRegister = v.value
					break;
				case 3:
					// 门诊  确定Value键值对
					this.ks.applyOutpatient = v.value
					break;
				case 4:
					// 住院 medicineType 确定Value键值对
					this.ks.applyHospital = v.value
					break;
				}
		},
		// 打开model
		openModel(row){
			this.ks = row;
			this.dialogFormVisible = true;
		},
		//修改保存
		editNewDiction(){
			// 设置一个定时器 用于传递成功后清空原数据源
			this.loading = true;
			this.disabled = true;
			setTimeout(() => {
				this.$emit('editksData',this.ks)
				this.loading = false;
			this.$message({
			  message: '科室属性已修改！',
			  type: 'success',
			  duration: 1500,
			});
			this.disabled = false;
			this.dialogFormVisible = false;
			}, 1500)
		},
		handleAddClose(done) {
			this.$confirm('确认关闭？')
			  .then(_ => {
				  done();
				// this.formdisabled = true;
				// location.reload();
				// done();
			  })
			  .catch(_ => {
				this.formdisabled = this.formdisabled;
			  });
		},
	},
	
}
</script>

<style lang="less" scoped>
.layout-app{
    width: 100%;
    height: 100%;
    display: flex;
	background-color: #f8f8f8;
   .addksFile{
		/deep/ .el-dialog__header{
			padding: 12px;
			background-color: #007bb0;
		}

		/deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
			margin-bottom: 8px;
		}
		/deep/ .el-dialog__title{
			color: #fff;
		}
		/deep/ .el-dialog__headerbtn .el-dialog__close{
			color: #fff;
		}
		/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
			background-color: brown;
		}
		/deep/ .el-dialog__body{
			padding: 0;
		}
		/deep/ .el-divider--horizontal{
			margin: 0;
		}
		/deep/ .el-form-item__label{
			display: flex;
			justify-content: right;
			font-size: 12px;
		}
		// self
		// 选项卡
		.tabs{
			
			.tabsMain{
				display: flex;
				border: 1px solid #f4f4f4;
				.tabs-left{
					flex: 1;
					padding:12px 0 0 12px;
					border: 1px solid #e8f0ee;
					// date flex
					.autoWidth{
						width: 100%; /* 设置宽度为100% */
					}
					/deep/ .el-input__icon{
						color: brown;
					}
				}
				.tabs-right{
					flex: 1;
					padding:12px;
					margin-left: 8px;
					border: 1px solid #e8f0ee;
				}
			}
			
			
		}
	}
}
</style>